<admintpl file="header"/>
</head>
<body>
<div class="wrap js-check-wrap">
    <ul class="nav nav-tabs">
        <li><a href="{:U('RequestRecord/lists')}">请求记录</a></li>
        <li class="active"><a href="javascript:">请求统计 Charts</a></li>
    </ul>
    <div>
        <div id="main" style="width: 100%;height:500px;"></div>
    </div>
</div>
<script src="__PUBLIC__/js/common.js"></script>
<script src="__PUBLIC__/js/echarts/echarts.min.js"></script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    var strNameJSON = '{$dataName}';
    var obj_name = eval(strNameJSON);

    var strGroupJSON = '{$dataGroup}';
    var obj_group = eval(strGroupJSON);

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: 'API 接口请求数据统计'
        },
        tooltip: {},
        legend: {
            data: ['请求数量']
        },
        xAxis: {
            data: obj_name,
            axisLabel: {
                inside: true,
                textStyle: {
                    color: '#fff'
                }
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            },
        },
        yAxis: {},
        series: [{
            name: '请求数量',
            type: 'bar',
            data: obj_group,
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            {offset: 0, color: '#83bff6'},
                            {offset: 0.5, color: '#188df0'},
                            {offset: 1, color: '#188df0'}
                        ]
                    )
                },
                emphasis: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            {offset: 0, color: '#2378f7'},
                            {offset: 0.7, color: '#2378f7'},
                            {offset: 1, color: '#83bff6'}
                        ]
                    )
                }
            },
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>